<template>
	<wd-config-provider theme="dark">
		<view class="tabbarpage-container-dark">
			<!--胶囊上方-->
			<div :style="{'padding-top': statusBarHeight}">
				
			</div>
			<!--胶囊-->
			<div class="head-container" :style="{'height': capsuleHeight}">
				<wd-icon @click="jumpBack" color="#fff" name="thin-arrow-left" size="18px"></wd-icon>
				<div>新建错题</div>
				<div style="width: 18px;"></div>
			</div>
			<!--主体-->
			<div class="tabbarpage-body" >
				<div class="ques-container">
					<wd-tabs v-model="tab" animated>
					  <block v-for="(item, index) in quesData" :key="index">
					    <wd-tab style="position: relative;" :title="index === 3 ? '自定义' : `智能匹配${index + 1}`">
							<!--题目-->
							<div class="ques-line" v-if="index !== 3">
								<div class="h1-line">
									<div class="h1">题目：</div>
									<div class="tag-container">
										<div class="tag">{{item.category === 'zuowen' ? '作文' : '翻译'}}</div>
										<div class="tag" v-if="item.field !== undefined && item.field !== null && item.field">{{item.field}}</div>
									</div>
								</div>
								<p>{{item.content}}</p>
							</div>
							<!--标准答案-->
							<div class="ques-line" v-if="index !== 3">
								<div class="h1">标准答案：</div>
								<p>{{item.answer}}</p>
							</div>
							<!--我的答案-->
							<div class="ques-line dark-purple-card ques-line-card" v-if="index !== 3">
								<div class="h1">我的作答：</div>
								<textarea auto-height maxlength="-1" v-model="item.stuAnswer" class="text-area"></textarea>
								<div class="btns-container">
									<button @click="ocrCommenSend('zuowen', index)"><wd-icon name="camera" size="20px"></wd-icon></button>
									<button @click="aiAnalyseBtn(index)">AI一键分析</button>
								</div>
							</div>
							<!--智能分析-->
							<div class="ques-line" v-if="index !== 3">
								<div class="h1">智能分析：</div>
								<p>{{item.aiComment}}</p>
							</div>
							<!--错因-->
							<div class="ques-line dark-purple-card ques-line-card" v-if="index !== 3">
								<div class="h1-line">
									<div class="h1" style="margin-bottom: 0;">错因：</div>
									<div style="flex: 1;"></div>
									<input style="width: 160px; padding: 4px 12px; background-color: #ffffff11; z-index: 0;" v-model="item.falseReason"/>
								</div>
							</div>
							<!--用户备注-->
							<div class="ques-line dark-purple-card ques-line-card" v-if="index !== 3">
								<div class="h1">用户备注：</div>
								<textarea auto-height maxlength="-1" v-model="item.userComment" class="text-area"></textarea>
							</div>
							<!--新增错题-->
							<div class="sure-btn-container" v-if="index !== 3">
								<button class="sure-btn" @click="addNewQuesBtn(index)">新增错题</button>
							</div>
							
							<!--自定义错题-->
							<CustomNewQues v-if="index === 3" :customNewQues="customNewQues"></CustomNewQues>
					    </wd-tab>
					  </block>
					</wd-tabs>
				</div>
				<!--底部tabbar占据高度72px-->
			</div>
			<!--AI助手-->
			<div class="ai-btn" @click="changeAiCardHide">AI</div>
			<transition name="fade">
				<QuesAiCard :quesId="1" @hide="changeAiCardHide" v-if="aiCardShow"></QuesAiCard>
			</transition>
		</view>
	</wd-config-provider>
</template>

<script>
	import NewTagCom from '@/components/NewTagCom.vue'
	import QuesAiCard from '@/components/QuesAiCard.vue'
	import { currentOCR } from '../../../js/ques';
	import { zuowenPostResultToAiComment } from '../../../js/apiJsHelper';
	import CustomNewQues from '@/components/CustomNewQues.vue'
	
	export default {
		data() {
			return {
				tab:0,
				customNewQues: null,
				addTagQuesIndex: '',
				aiCardShow: false,
				quesData: [],
				ocrCommonIndex: 0,
			}
		},
		onLoad(options) {
			let jsonDataStr = decodeURIComponent(options.jsonData);
			this.quesData = JSON.parse(jsonDataStr);
			this.customNewQues = this.quesData[3];
			console.log('获取到习题集' + this.quesData);
		},
		methods: {
			//AI
			changeAiCardHide(){
				this.aiCardShow = !this.aiCardShow
				setTimeout(()=>{
					const aiQuestion = '$你好，我想请问一下这道题目，\n' +
										this.quesData[this.tab].content +
										'这道题的标准答案是：\n' + 
										this.quesData[this.tab].answer + 
										'我的答案是：\n' + 
										this.quesData[this.tab].stuAnswer + 
										'请在后续的对话中帮助我\n' + 
										'首句输出请说‘您好，请问您对这道题有什么疑问吗？’，回答长度限制在100个字以内！回答要精短！'
					uni.$emit('chatAccept', aiQuestion)
				},200)
			},
			//OCR通用识别
			ocrCommenSend(type, index){
				currentOCR.mode = type;
				uni.navigateTo({
					url: '/pages/newques/CameraPage/CameraPage'
				})
				uni.$on('acceptOcrCommon',(value)=>{
					if(currentOCR.mode === 'zuowen'){
						this.quesData[index].stuAnswer = value
					}
					uni.$off('acceptOcrCommon')
				})
			},
			//AI分析
			aiAnalyseBtn(index){
				const sendData = this.quesData[index]
				console.log('AI错题分析上传数据'+sendData)
				uni.showLoading({
				    title: '分析中...'
				});
				let that = this;
				uni.request({
				  url: globalProps.baseApi + 'cuotiji',
				  method: 'POST',
				  data: sendData,
				  success: function (res) {
					uni.hideLoading();
					const zuowenResult = zuowenPostResultToAiComment(res.data)
					that.quesData[index].aiComment = zuowenResult;
				  },
				  fail: function (err) {
				    console.log('AI分析请求失败', err);
				    uni.showToast({
				    	title: '请求失败',
				    	icon: 'error'
				    })
				  }
				});
			},
			//增加错题
			addNewQuesBtn(index){
				const sendData = this.quesData[index]
				console.log(sendData)
				uni.showLoading({
				    title: '分析中...'
				});
				let that = this;
				uni.request({
				  url: globalProps.baseApi + 'cuotiji/addCuotiFromExe',
				  method: 'POST',
				  data: sendData,
				  success: function (res) {
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/HomePage/HomePage'
						})
					},1800)
				  },
				  fail: function (err) {
				    console.log('添加错题失败', err);
				    uni.showToast({
				    	title: '请求失败',
				    	icon: 'error'
				    })
				  }
				});
			}
		}
	}
</script>

<script setup>
	import TabbarCom from '@/components/TabbarCom.vue'
	import { ref } from 'vue';
	import { globalProps } from '@/js/global.js'
	
	const statusBarHeight = ref(globalProps.statusBarHeight)
	const capsuleHeight = ref(globalProps.capsuleHeight)
	const jumpBack = ()=>{
		uni.switchTab({
			url: '/pages/HomePage/HomePage'
		})
	}
</script>

<style>
	@import "@/css/global.css";
	@import "@/css/animation.css";
	.head-container{
		display: flex;
		align-items: center;
		margin: 0 16px;
		justify-content: space-between;
		color: #fff;
		width: calc(100% - 32px);
		letter-spacing: 1px;
	}
	.tabbarpage-container-dark{
		background-color: #1b1b1b;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.skeleton-container{
		position: absolute;
		top: 20px;
		left: 12px;
		right: 12px;
		height: 120px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.ques-container{
		position: absolute;
		top: 8px;
		bottom: 12px;
		left: 12px;
		right: 12px;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100%;
	}
	.ques-container .content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
	}
	.ques-line{
		color: #fff;
		padding: 12px 4px;
		white-space: pre-line;
		word-break: break-all;
		display: flex;
		flex-direction: column;
		animation: appear-ani .8s 1;
	}
	.ques-line .btns-container{
		margin: 16px 0 8px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		animation: appear-ani .8s 1;
	}
	.ques-line .btns-container button{
		padding: 4px 20px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin: 0;
		color: #fff;
	}
	.ques-line .btns-container button:nth-child(2){
		background-color: #4942ad;
	}
	.ques-line .btns-container button:nth-child(1){
		background-color: #888;
	}
	.ques-line .text-area{
		width: calc(100% - 16px);
		min-height: 28px;
		height: auto;
		background-color: #ffffff11;
		padding: 8px;
		z-index: 0;
		white-space: pre-line;
	}
	.h1-line{
		width: 100%;
		display: flex;
	}
	.h1{
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 18px;
		margin-bottom: 12px;
	}
	.sure-btn-container{
		margin-bottom: 32px;
		animation: appear-ani .8s 1;
	}
	.sure-btn{
		margin: 12px 4px 24px 4px;
		width: calc(100% - 8px);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		background-color: #4942ad;
		color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 4px #00000022;
	}
	.ai-btn{
		position: fixed;
		bottom: 28px;
		right: 20px;
		width: 48px;
		height: 48px;
		color: #fff;
		background: linear-gradient(to right bottom, #d656d488, #2341ad66);
		backdrop-filter: blur(4px);
		border-radius: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 19px;
		letter-spacing: 2px;
	}
	.tag-container{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 8px;
	}
	.tag-container .tag{
		background-color: #4942ad;
		padding: 4px 8px;
		font-size: 13px;
		border-radius: 4px;
		margin: 0 8px 0 0;
	}
	.ques-line-card{
		margin: 8px 0;
		padding: 12px;
		width: calc(100% - 26px);
		border-radius: 8px;
		border: 1px solid #2e4e99;
	}
	
</style>
